<@override name="content">
<#assign type="Private<sup>${contest.type}</sup>">
<#if contest.type==0>
<#assign type="Public">
</#if>
<h3 class="text-center">${type} Contest ${contest.cid!}: ${contest.title!}</h3>
<div class="row text-center">
  <div class="span4 offset4">
    <div class="well">
      <span>Start time</span>: <span class="time">${contest.startDateTime!}</span> 
      <span>End time</span>: <span class="time">${contest.endDateTime!}</span><br>
      <span>Current System Time</span>: <span class="time" id="current">${contest.startDateTime!}</span>
      <span id="reminder"></span>
    </div>
    <div class="countdown"></div>
  </div>
</div>
</@override>
<@override name="scripts">
<link href="assets/jcountdown/jcountdown.css" type="text/css" rel="stylesheet">
<script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/jcountdown/jquery.jcountdown.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var current_time = ${serverTime!}*1000;
    function updateTime() {
      current_time+=1000;
      $("#current").html(new Date(current_time).format("yyyy-MM-dd hh:mm:ss"));
    }
    setInterval(updateTime, 1000);
    
    var startTimeText = new Date(${contest.startTime}*1e3).format("yyyy/MM/dd hh:mm:ss");
    var dayNumber = Math.floor(${contest.startTime-serverTime}/3600/24);
    dayNumber = dayNumber ? dayNumber.toString().length : 0;
    $('.countdown').jCountdown({
      timeText: startTimeText,
      timeZone: 8,
      style: "metal",
      color: "black",
      width: 0,
      textGroupSpace: 15,
      textSpace: 0,
      reflection: !1,
      reflectionOpacity: 10,
      reflectionBlur: 0,
      dayTextNumber: dayNumber,
      displayDay: dayNumber>0,
      displayHour: !0,
      displayMinute: !0,
      displaySecond: !0,
      displayLabel: !0,
      onFinish: function() { window.location.reload(); }
    });
});
</script>
<script type="text/javascript">
   /*
    * 请修改下面js对象的内容以完成定制
    * 内容：请定制为需要提醒用户的内容,
    * 时间：请定制为事件发生的时间，格式为：年-月-日 时:分 
    * advance：请定制为需要提前提醒用户的时间，0为准时提醒
    * url： 请定制为提醒用户访问的url链接
    * icon： 生成的icon的大小，可选值为1，2，3，尺寸分别为90*24，63*24，50*16
    * 注意：如果不使用标准接口，而是按需要自己生成链接地址
    * 请用encodeURIComponent对内容和时间进行编码。
    */ 
  var __qqClockShare = {
     content: "<#if user??>Hi ${user.name}, </#if>比赛 ${contest.cid!}: ${contest.title!} 即将开始。",
     time: new Date(${contest.startTime!0}*1000).format("yyyy-MM-dd hh:mm"),
     advance: 5,
     url: "${baseUrl}/contest/show/${contest.cid!}",
     icon: "1_1"
  };
  $('#reminder').html('<a href="http://qzs.qq.com/snsapp/app/bee/widget/open.htm#content=' + encodeURIComponent(__qqClockShare.content) +'&time=' + encodeURIComponent(__qqClockShare.time) +'&advance=' + __qqClockShare.advance +'&url=' + encodeURIComponent(__qqClockShare.url) + '" target="_blank"><img src="http://i.gtimg.cn/snsapp/app/bee/widget/img/' + __qqClockShare.icon + '.png" style="border:0px;"/></a>');
</script>
</@override>
<@extends name="../common/_layout.html" />
